<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="../index.js"></script>
    <title>课表</title>
    <style>
        #coursesTable {
            padding: 15px 10px;
        }
        .Courses-head > div {
            text-align: center;
            font-size: 14px;
            line-height: 28px;
        }
        .left-hand-TextDom, .Courses-head {
             background-color: #f2f6f7;
         }

        .Courses-leftHand{
            background-color: #f2f6f7;
            font-size: 12px;
        }
        .Courses-leftHand .left-hand-index{
            color: #9c9c9c;
            margin-bottom: 4px !important;
        }
        .Courses-leftHand p {
            text-align: center;
            font-weight: 900;
        }
        .Courses-leftHand>div{
            padding-top: 5px;
            border-bottom: 1px dashed rgb(219, 219, 219);
        }
        .Courses-leftHand>div:last-child{
            border-bottom: none !important;
        }
        .left-hand-TextDom, .Courses-head{
            border-bottom: 1px solid rgba(0,0,0,0.1) !important;
        }
        .Courses-content>ul{
            border-bottom: 1px dashed rgb(219, 219, 219);
            box-sizing: border-box;
        }
        .Courses-content>ul:last-child{
            border-bottom: none !important;
        }
        .highlight-week{
            color: #02a9f5 !important;
        }
        .Courses-content li {
            text-align: center;
            color: #fff;
            font-size: 14px;
            line-height: 50px;
        }
        .stage_1, .left-hand-1{
            background-color: #FF6666;
        }
        .stage_2, .left-hand-2{
            background-color: #3399CC;
        }
        .stage_3, .left-hand-3{
            background-color: #66CCCC;
        }
        .Courses-leftHand{
            border-right: 1px solid #e0e0e0;
            color: #fff;
        }
        .Courses-leftHand> div {
            writing-mode: vertical-lr;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
            letter-spacing: 10px;
        }

    </style>
</head>
<body>
    <div id="coursesTable"></div>

    <script>
      var courseList = [
        ['','语文','英语','物理','语文','数学','英语','物理','物理','数学','英语','物理'],
        ['数学','语文','物理','物理','语文','语文','语文','物理','数学','语文','语文','体育'],
        ['语文','数学','英语','物理','','数学','英语','物理','语文','数学','英语','物理'],
        ['数学','语文','物理','物理','语文','语文','语文','英语','数学','语文','语文','体育'],
        ['语文','数学','英语','物理','语文','数学','英语','物理','语文','数学','英语','物理'],
        ['数学','语文','物理','物理','语文','语文','语文','英语','数学','语文','语文','体育'],
        ['体育','数学','','物理','语文','数学','英语','物理','语文','数学','英语','物理']
      ];
      var week =  window.innerWidth > 360 ? ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] :
        ['一', '二', '三', '四', '五', '六', '日'];
      var now = new Date();
      var day = now.getDay()
      var courseType = [
        ['上午', 4],
        ['下午', 4],
        ['晚上', 4]
      ];

      var times = new Timetables({
        el: '#coursesTable',
        timetables: courseList,
        week: week,
        merge: false,
        timetableType: courseType,
        highlightWeek: day,
        gridOnClick: function (e) {
          console.log(e)
        },
        styles:{
          leftHandWidth: 50,
          Gheight: 50,
          palette: false
        }
      });
    </script>
</body>
</html>
